<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>快车租车</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="./utils/cookieUtils.js"></script>
    <script src="./js/authTokenManager.js"></script>
    <script src="./utils/api.js"></script>
    <script src="./utils/searchUtils.js"></script>
    <script src="./api/auth.js"></script>
</head>
<body>
<div class="container">
    <div class="header">
        <a href="index.html" class="logo-link">
            <img src="./img/logo.png" alt="快车租车" class="logo">
        </a>
        <div class="user-section">
            <div class="user-info">
                <img src="./img/user-placeholder.jpg" alt="用户头像" class="user-avatar">
                <span class="username">未登录</span>
            </div>
            <button class="login-btn" type="button" onclick="window.open('./pages/login.html', '_blank')">登录</button>
            <button class="register-btn" type="button" onclick="window.open('./pages/register.html', '_blank')">注册</button>
            <button class="logout-btn" type="button" onclick="handleLogout()">退出登录</button>
        </div>
    </div>
    <div class="page-nav">
        <div class="nav-item active">
            <span class="nav-text">我要租用</span>
            <div class="nav-indicator">
                <div class="nav-line"></div>
                <div class="nav-arrow"></div>
            </div>
        </div>
        <div class="nav-item nav-link" onclick="window.location.href='./pages/lender-dashboard.html'">
            <span class="nav-text">我要出借</span>
            <div class="nav-indicator">
                <div class="nav-line"></div>
                <div class="nav-arrow"></div>
            </div>
        </div>


    </div>
    <!-- 搜索栏 -->
    <div class="new-search-bar">
        <img src="./img/search.jpg" alt="搜索" class="search-icon">
        <input type="text" class="search-input" placeholder="搜索车辆的品牌，车型……">
        <button class="search-btn" type="button">搜索</button>
    </div>
    
    <!-- 车辆列表容器 -->
    <div class="car-list-container">
        <div class="car-list-title">可用车辆</div>
        <div id="carList" class="car-list">
            <!-- 车辆列表将通过JavaScript动态生成 -->
        </div>
    </div>
</div>
<script src="./api/cars.js"></script>
<script src="./js/index.js"></script>
</body>
</html>